<!-- 1. 逻辑代码 写函数 定义数据-->

<script setup lang="ts">
const info = '打球'
const htmlStr = '<button>点我试试</button>'
</script>

<!-- 2. 结构 -->
<template>
  <!-- 普通文本， 二者区别不打， 但标签内部不能写东西， 会被覆盖， 无意义 -->
  <div>普通文本对比</div>
  <div v-text="info"></div>
  <div v-html="info"></div>
  <!-- 针对html标签， 标签如果需要解析， 需要用v-html -->
  <div>标签渲染对比</div>
  <div v-text="htmlStr"></div>
  <div v-html="htmlStr"></div>
  <!-- 无论是 v-html 还是 v-text 都会覆盖 子元素 -->
  <!-- 不希望标签里面内容被替换， 推荐使用插值表达式 -> html标签内容不会被解析 -->
  <div>{{ htmlStr }}</div>
</template>
<!-- 3. 样式 -->
<style scoped></style>
